<template>
  <div class="zz">
    <div v-if="wz1">
      <div style="display: none">{{ this.$route.params.id }}</div>
      <div class="fly">
        <span class="span1">{{ menu.labelOne }}</span>
        <br />
        <span class="span1">{{ menu.labelTwo }}</span>

        <p class="p">
          {{ menu.contentOne }}
          {{ menu.contentTwo }} {{ menu.labelThree }} {{ menu.contentThree }}
        </p>

        <div v-for="(item, index) in answer" :key="index">
          <el-radio v-if="type2" v-model="radio" :label="item"
            >{{ item }}
          </el-radio>
        </div>

        <el-checkbox-group v-if="type3" v-model="checkList">
          <div v-for="(item, index) in answer" :key="index">
            <el-checkbox :label="item"></el-checkbox>
          </div>
        </el-checkbox-group>

        <p v-if="type4" class="p">
          <span v-for="(item, index) in menu" :key="index">
            {{ item }}
            <input
              name="value"
              v-model="value[index]"
              @input="change"
              type="text"
            />
          </span>
        </p>

        <div class="ye">
          <div class="btn" @click="back">上一页</div>
          <div v-if="xyy" class="btn" @click="begin">下一页</div>
          <div v-if="wenti" class="btn" @click="second">下一页</div>
          <div v-if="end" class="btn" @click="ends">重新开始</div>
        </div>
      </div>
    </div>

    <el-button
      @click="cang"
      class="by"
      type="warning"
      :icon="like ? 'el-icon-star-on' : 'el-icon-star-off'"
      circle
    ></el-button>

    <div v-if="wz2">
      <div class="fly">
        <!-- <p v-for="(items,indexs) in l" :key="indexs">
            {{item}}
          </p> -->
        <p class="pl">你的回答:</p>

        <p v-html="an" class="pl"></p>
        <p class="pl">
          {{ ans.data }}
        </p>

        <div class="ye">
          <div class="btn" @click="first">上一页</div>
          <div class="btn" @click="third">下一页</div>
        </div>
      </div>
    </div>

    <div v-if="wz3">
      <div class="fly">
        <p class="pl">正确答案:{{ ans.cddiscover }}</p>
        <div class="ye">
          <div class="btn" @click="second">上一页</div>
          <div class="btn" @click="begin">下一页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    let token = JSON.parse(localStorage.getItem("login2")).token;
    this.tId = this.$route.params.id;
    this.token = token;
    this.login();
    this.cangt(token);
  },
  data() {
    return {
      like: "",
      tId: "",
      token: "",
      menu: "",
      answer: "",
      radio: "",
      wz1: true,
      wz2: false,
      wz3: false,
      wenti: false,
      xyy: true,
      end: false,
      current: "",
      id: "",
      an: "",
      checkList: [],
      typeid: "",
      type2: false,
      type3: false,
      type4: false,
      content: "",
      inpt: false,
      value: [],
      l: [1, 2, 3, 4, 5],
      ans: "",
      drawer: false,
    };
  },
  //  跳转
  updated() {
    if (this.tId != this.$route.params.id) {
      this.tId = this.$route.params.id;
      this.login();
    }
  },

  methods: {
    // 开始调用
    ipt() {
      this.inpt = true;
    },
    async login() {
      this.type2 = false;
      this.type3 = false;
      this.type4 = false;

      this.end = false;
      this.xyy = true;
      let formData = new FormData();
      formData.append("token", this.token);
      formData.append("tId", this.tId);
      let res = await this.$http.post("/iSupport-api/content/start", formData);
      this.menu = res.data.data[0];
      console.log(res.data.data[0], 88888);
    },

    // 收藏和取消收藏
    async cang() {
      if (this.like) {
        this.like = false;
        this.qu();
        this.$message("已取消收藏了");
      } else {
        let formData = new FormData();
        formData.append("token", this.token);
        formData.append("tId", this.$route.params.id);
        let res = await this.$http.post("/iSupport-api/collect/add", formData);
        console.log(res);
        this.$message({
          message: "恭喜你，收藏成功",
          type: "success",
        });

        this.like = true;
      }
    },
    // 取消收藏
    async qu() {
      let formData = new FormData();
      formData.append("token", this.token);
      formData.append("tId", this.$route.params.id);

      let p = await this.$http.post("/iSupport-api/collect/delete", formData);
      console.log(p);
    },
    // 判断收藏状态
    async cangt(token) {
      let res = await this.$http("/iSupport-api/collect/list", {
        params: { token, current: 1, size: 5 },
      });
      console.log(res.data.data, 5555555);
      if (res.data.data != "") {
        res.data.data.forEach((item) => {
          if (item.tId == this.$route.params.id) {
            this.like = true;
          } else if (item) {
            this.like = false;
          }
        });
      } else {
        this.like = false;
      }
      console.log(this.like);
    },
    // 看问题即跳转到第几页
    first() {
      this.wz1 = true;
      this.wz2 = false;
      this.wz3 = false;
    },
    change() {
      console.log(this.value);
      console.log(11);
    },

    async huida(bian) {
      console.log(bian, this.id, this.token);
      let formData = new FormData();
      formData.append("token", this.token);
      formData.append("issueId", this.id);
      formData.append("selectedAnswer", bian);

      let res = await this.$http.post(
        "/iSupport-api/user-answer/add",
        formData
      );
      // if(res.split('-'))
      // JSON.stringify(res).split("-")
      // console.log(typeof JSON.stringify(res).split("-"));
      console.log(res);
      this.ans = res;
      console.log(res.cddiscover, 555555555555);
      this.an = res.cddiscover.replace(/-/g, "<br>");
      console.log(this.an);

      this.wz1 = false;
      this.wz2 = true;
      this.wz3 = false;
      console.log(this.an, 8888);
    },

    async second() {
      var daan = "";
      if (this.radio != "" && this.typeid == 2) {
        daan = this.radio;
      } else if (this.checkList.length != 0 && this.typeid == 3) {
        daan = this.checkList.join("-");
      } else if (this.value.length != 0 && this.typeid == 4) {
        daan = this.value.join("-");
      }

      if (this.radio == "" && this.typeid == 2) {
        this.$message("请选择答案");
      } else if (this.checkList.length == 0 && this.typeid == 3) {
        this.$message("请选择答案");
      } else if (this.value.length == 0 && this.typeid == 4) {
        this.$message("请选择答案");
      } else {
        this.huida(daan);
      }

      // else {
      //  let y= this.checkList.join("-")
      //  this.huida(y)
      // }
    },
    third() {
      this.wz1 = false;
      this.wz2 = false;
      this.wz3 = true;
    },
    // 从头来
    ends() {
      this.login();
    },
    // 下一步
    async begin() {
      this.daan = false;

      let res = await this.$http.post("/iSupport-api/content/underway", {
        token: this.token,
      });

      if (res.message == "课程结束") {
        this.xyy = false;
        this.wenti = false;
        this.end = true;
        this.$message("结束");
        console.log(this.wenti);
      } else {
        this.end = false;
        this.wenti = true;
        // this.issueId = res.data.data[0].id;
        console.log(res.data.data[0]);
        // this.answers = res.data.data[0].answer;

        this.menu = res.data.data[0];

        console.log(this.menu, 5555555);

        // console.log(res.cddiscover.current, "前面页码");

        if (this.current + 1 == res.cddiscover.current) {
          this.daan = true;
        }

        //下一步拦截单选问题
        if (res.data.data[0].typeState == 2) {
          this.answer = res.data.data[0].optionText.split("-");
          console.log(this.answer, 111111111111111);

          this.type2 = true;
          this.type3 = false;
          this.type4 = false;

          this.wenti = true;
          this.xyy = false;
          this.typeid = res.data.data[0].typeState;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else if (res.data.data[0].typeState == 3) {
          this.answer = res.data.data[0].optionText.split("-");
          this.wenti = true;

          this.type3 = true;
          this.type2 = false;
          this.type4 = false;

          this.typeid = res.data.data[0].typeState;
          this.xyy = false;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else if (res.data.data[0].typeState == 4) {
          // this.answer = res.data.data[0].optionText.split("-");
          this.wenti = true;

          this.menu = res.data.data[0].contentOne.split("&");
          console.log(this.menu);
          this.type3 = false;
          this.type2 = false;
          this.type4 = true;

          this.typeid = res.data.data[0].typeState;
          this.xyy = false;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else {
          this.answer = [];
          this.wenti = false;
          this.xyy = true;
          this.type4 = false;
        }

        // if (res.data.data[0].typeState == 3) {
        //   this.answer = res.data.data[0].optionText.split("-");

        // } else {

        // }
      }
      console.log(222);

      this.wz1 = true;
      this.wz2 = false;
      this.wz3 = false;
    },
    // 上一步
    async back() {
      this.end = false;
      this.wenti = false;
      this.xyy = true;
      let res = await this.$http.post("/iSupport-api/content/laststep", {
        token: this.token,
      });
      console.log(res, "back");
      if (res.message == "已经到第一页") {
        this.$message("已经到第一页");
        this.syy = false;
      } else {
        console.log(res.cddiscover.current);

        if (res.cddiscover.current == 1) {
          console.log(1);
        }
        this.menu = res.data.data[0];
        // console.log(this.menu,5555555);
        //判断问题
        // console.log(res.data.data[0]);
        // if (res.data.data[0].typeState == 2) {
        //   console.log(222);
        //   this.wenti = true;
        //   this.xyy = false;
        //   this.answer = res.data.data[0].optionText.split("-");
        //   console.log(this.answer);
        // } else {
        //   this.answer = [];
        //   // this.xy = false;
        // }

        //上一步拦截单选问题
        if (res.data.data[0].typeState == 2) {
          this.answer = res.data.data[0].optionText.split("-");
          console.log(this.answer, 111111111111111);

          this.type2 = true;
          this.type3 = false;
          this.type4 = false;

          this.wenti = true;
          this.xyy = false;
          this.typeid = res.data.data[0].typeState;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else if (res.data.data[0].typeState == 3) {
          this.answer = res.data.data[0].optionText.split("-");
          this.wenti = true;

          this.type3 = true;
          this.type2 = false;
          this.type4 = false;

          this.typeid = res.data.data[0].typeState;
          this.xyy = false;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else if (res.data.data[0].typeState == 4) {
          // this.answer = res.data.data[0].optionText.split("-");
          this.wenti = true;

          this.menu = res.data.data[0].contentOne.split("&");
          console.log(this.menu);
          this.type3 = false;
          this.type2 = false;
          this.type4 = true;

          this.typeid = res.data.data[0].typeState;
          this.xyy = false;
          this.current = res.cddiscover.current;
          this.id = res.data.data[0].id;
        } else {
          this.answer = [];
          this.wenti = false;
          this.xyy = true;
          this.type4 = false;
        }
      }

      this.wz1 = true;
      this.wz2 = false;
      this.wz3 = false;
    },
  },
};
</script>

<style>
.zz {
  position: relative;
}
.fly {
  width: 73%;
  height: 500px;
  /* border: 1px solid red; */
  /* margin-left: 150px; */
  background:#fff;
  margin: 0 auto;
}
.span1 {
  color: #008c84;
  font-size: 30px;
  line-height: 55px;
}
.p {
  text-indent: 33px;
  line-height: 38px;
  font-size: 16px;
  display: block;
  margin-top: 25px;
}
.pl {
  /* text-indent: 33px; */
  line-height: 38px;
  font-size: 16px;
  display: block;
  /* margin-top: 25px; */
}

.ye {
  display: flex;
  position: absolute;
  /* bottom: 0; */
  right: 9%;
}
.aa {
  border: none;
  background: none;
  outline: none;
  border-bottom: 1px solid black;
}
.btn {
  width: 54px;
  height: 34px;
  color: #fff;
  background-color: #2571b3;
  text-align: center;
  line-height: 34px;
  cursor: pointer;
  border-radius: 3px;
  margin-top: 20px;
  margin-left: 10px;
}
.by {
  position: absolute;
  top: 0;
  right: 5%;
  /* width: 70px; */
}

@media screen and (max-width: 768px) {
  .fly {
    width: 100%;
  }
  .by {
    position: absolute;
    top: 3%;
    right: 9%;
    
    /* width: 70px; */
  }
  .el-button.is-circle{
  padding: 7px;
  }
  .p {
    font-size: 14px;
  }
  .span1 {
    font-size: 24px;
  }
  .btn {
    font-size: 12px;
    width: 40px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
}
</style>